import React,{useEffect,useCallback} from 'react'
import {useLocation,useHistory} from 'react-router-dom'
import {BuyWrapper} from './styledDetail'
import img from '@/assets/images/aa.png'
import Navbar from '@/components/Navbar/Navbar'
import left from '@/assets/images/left.png'
import {useDispatch } from 'react-redux'
import {getcart} from '../index'
import { Toast} from 'antd-mobile';

export default function Buyinfo() {
    const {state} =useLocation()
    const history=useHistory()
   
    const dispatch =useDispatch()
    
   
    const handleClick=useCallback(
        ()=>{
            history.goBack()
        }
    )
    const handleBuy=useCallback(
        ()=>{
            dispatch(getcart(state.product))
            Toast.success('买对了，亲！！！', 1);
            history.goBack()
        }
    )

    return (
        <BuyWrapper>
               <Navbar
                title='确认订单'
                icon={left}
                color='#F8F8F8'
                onClick={handleClick}
                >
                </Navbar>
            <div className='addres'>
                <p>收货人:吴彦祖</p>
                <p>啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧</p>
            </div>
            <div className='good'>
                <div className='goodimg'>
                    <img src={state.product.logoUrl} alt="" />
                </div>
                <div className='info'>
                    <p>{state.product.title}</p>
                    <p>
                        <span>{state.product.size}</span>
                        <span>数量x1</span>
                    </p>
                </div>
            </div>
            <div className='aaa'>
                <img src={img} alt="" />
            </div>
            <div className='buy'>
                <div>实付款：{state.product.price+18}</div>
            <button
                onClick={handleBuy}
                >提交订单</button>
            </div>
        </BuyWrapper>
    )
}
